<template>
  <div class="one-map-3d">
    <div id="cesiumContainer"></div>
  </div>
</template>

<script>
  import Bubble from './bubble/index.js';
  import DragEntity from './dragentity.js';

  export default {
    data() {
      return {
        viewer: null,
        fullSizenum: 'fullSize',
        poinEntity: {},
        poin: [
          { id: '12321321', name: '北京西路测试点', type: '固定枪机', state: '在线', position: { x: 116.4568, y: 39.8926 }, text: 'X' },
          { id: '43244324', name: '阿乐修理厂门口', type: '固定枪机', state: '在线', position: { x: 116.4568, y: 39.8944 }, text: '+' },
          { id: '43764324', name: '裕华路加油站', type: '固定枪机', state: '在线', position: { x: 116.4566, y: 39.8923 }, text: '?' },
          { id: '437543345', name: '康佳大药房', type: '固定枪机', state: '在线', position: { x: 116.4513, y: 39.8923 }, text: '!' }
        ]
      };
    },
    mounted() {
      this.initEarth();
      this.dragEntity();
      this.leftDownAction();
    },
    methods: {
      initEarth() {
        this.viewer = new Cesium.Viewer('cesiumContainer', {
          homeButton: false,
          sceneModePicker: false,
          baseLayerPicker: false, // 影像切换
          animation: true, // 是否显示动画控件
          infoBox: false, // 是否显示点击要素之后显示的信息
          selectionIndicator: false, // 要素选中框
          geocoder: false, // 是否显示地名查找控件
          timeline: true, // 是否显示时间线控件
          fullscreenButton: false,
          shouldAnimate: false,
          navigationHelpButton: false // 是否显示帮助信息控件
        });
      },
      leftDownAction() {
        let viewer = this.viewer;
        this.handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
        let _this = this;
        let id;
        _this.handler.setInputAction(function (movement) {
          let pick = viewer.scene.pick(movement.position);
          if (Cesium.defined(pick) && pick.id.id) {
            id = pick.id.id;
            _this.bubble(id);
          } else {
            if (_this.bubbles) {
              _this.bubbles.windowClose();
            }
          }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
      },
      bubble(id) {
        if (this.bubbles) {
          this.bubbles.windowClose();
        }
        console.log(this.poinEntity[id]);
        this.bubbles = new Bubble(
          Object.assign(this.poinEntity[id], {
            viewer: this.viewer
          })
        );
      },
      //加载点
      dragEntity() {
        let drag = new DragEntity({
          viewer: this.viewer
        });
        let _this = this;
        this.poin.forEach((item) => {
          let entity = drag.addEntity(item);
          _this.poinEntity[item.id] = entity;
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .one-map-3d {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    .cesiumContainer {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 5;
    }
  }
</style> 